<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <link rel="stylesheet" href="/stylesheets/myAlert.css">
    <link rel="stylesheet" href="/bootstrap-3.3.7/dist/css/bootstrap.css">
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <link rel="stylesheet" href="/stylesheets/myHome.css">
    <link rel='stylesheet' href='/stylesheets/setting.css' />
    <script src="/javascripts/jquery.min.js"></script>
    <script src='/bootstrap-3.3.7/dist/js/bootstrap.min.js'></script>
    <script src='/javascripts/bootstrapValidator.js'></script>
    <script src='/javascripts/myAlert.js'></script>
  </head>
  <body>
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-12 mynav">
          <nav class="navbar navbar-default">
            <div class="container">
              <!-- Brand and toggle get grouped for better mobile display -->
              <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                  <span class="sr-only">Toggle navigation</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/">主页</a>
              </div>

              <!-- Collect the nav links, forms, and other content for toggling -->
              <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                  <!-- <li><a href="/">新鲜事</span></a></li> -->
                  <!-- <li><a href="#">问答</a></li> -->
                  <li><a href="/yangsheng">养生</a></li>
                  <li><a href="/meishi">美食</a></li>
                  <li><a href="/hufu">护肤</a></li>
                 <!--  <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">我的圈子 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                      <li><a href="#">佛系排行榜</a></li>
                      <li><a href="#">佛系笔记</a></li>
                      <li><a href="#">佛系活动</a></li>
                    </ul>
                  </li> -->
                </ul>
                <ul class="nav navbar-nav navbar-right">
                 <% if(typeof(username)=='undefined') { %>
                    <li><a class="sm_a" href="/login">登录</a></li>
                    <li><a class="sm_a" href="#">注册</a></li>
                  <% } %>
                  <% if(typeof(username)!='undefined') { %>
                    <% if(username!='') { %>
                      <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><%= username %> <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                          <li><a href="/myHome">我的主页</a></li>
                          <li><a href="/write">写博客</a></li>
                          <li><a href="/setting">资料设置</a></li>
                          <li role="separator" class="divider"></li>
                          <li><a href="/exit">退出登录</a></li>
                        </ul>
                      </li>
                    <% } %>
                    <% if(username=='') { %>
                      <li><a class="sm_a" href="/login">登录</a></li>
                      <li><a class="sm_a" href="#">注册</a></li>
                    <% } %>
                   <% } %>

                </ul>
                <form class="navbar-form navbar-right">
                  <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                  </div>
                  <i class="glyphicon glyphicon-search mysearch"></i>
                </form>
              </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
          </nav>
        </div>
      </div>
    </div>
    <div class="container-fluid smallnav">
      <div class="row">
        <div class="col-md-12 white">
          <nav class="navbar navbar-default">
            <div class="container">

              <!-- Collect the nav links, forms, and other content for toggling -->
              <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                  <li><a href="/myHome">我的文章</a></li>
                  <li><a href="/write">写文章</a></li>
                  <li class="active"><a href="/setting">资料设置</a></li>
                </ul>
              </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
          </nav>
        </div>
      </div>
    </div>
    <section class ="setting">
      <div class="container">
        <div class="row">
          <div class="col-md-3 set_left">
            <div class="head">
               <figure>
                <div class="img">
                  <img src="<%=data[0].pic %>" alt="">
                </div>
                <div class="my_des">
                  <h4><%=data[0].username %></h4>
                  <span><%=data[0].short %></span>
                </div>
              </figure>
            </div>
            <ul class="list-group">
              <li trid="1" class="list-group-item liactive" onclick="change($(this).attr('trid'))">修改个人资料</li>
              <li trid="2" class="list-group-item" onclick="change($(this).attr('trid'))">修改密码</li>
            </ul>
          </div>

          <div class="col-md-8 ">
            <div class="container set_right">
              <!-- <div class="divactive" trid="1"> -->
              <div trid="1">
               <!-- form: -->
                <section>
                    <div class="">

                        <form id="defaultForm" method="post" class="form-horizontal" action="/save_change">
                            
                            <div class="form-group pic_wrap">
                                <label class="col-xs-3 control-label">头像</label>
                                <div class="img">
                                    <img src="<%=data[0].pic %>" alt="">
                                </div>
                                <input class="pic" type="file">
                            </div>

                            <div class="form-group">
                                <label class="col-xs-3 control-label">用户名</label>
                                <div class="col-xs-6">
                                    <input value="<%=data[0].username %>" type="text" class="form-control" name="username" />
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-xs-3 control-label">邮箱</label>
                                <div class="col-xs-6">
                                    <input value="<%=data[0].email %>" type="text" class="form-control" name="email" />
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-xs-3 control-label">手机号</label>
                                <div class="col-xs-6">
                                    <input value="<%=data[0].tel %>" type="text" class="form-control" name="tel" />
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-xs-3 control-label">个性签名</label>
                                <div class="col-xs-6">
                                    <input value="<%=data[0].short %>" type="text" class="form-control" name="short" />
                                </div>
                            </div>
                          
                            <br>

                            <div class="form-group">
                                <div class="col-xs-1 col-xs-offset-6">
                                    <input type="submit" onClick="$.myToast('资料修改成功！')" class="btn" name="signup" value="确定修改">
                                </div>
                            </div>
                        </form>
                    </div>
                </section>
                <!-- :form -->
              </div>
              <div trid="2">
                <!-- form: -->
                 <section>
                     <div class="">

                         <form id="defaultForm2" method="post" class="form-horizontal" action="">

                             <div class="form-group">
                                 <label class="col-xs-3 control-label">原始密码</label>
                                 <div class="col-xs-5">
                                     <input value="" type="password" class="form-control" name="prepassword" />
                                 </div>
                             </div>

                             <div class="form-group">
                                 <label class="col-xs-3 control-label">新的密码</label>
                                 <div class="col-xs-5">
                                     <input value="" type="password" class="form-control" name="password" />
                                 </div>
                             </div>

                             <div class="form-group">
                                 <label class="col-xs-3 control-label">再次确认</label>
                                 <div class="col-xs-5">
                                     <input value="" type="password" class="form-control" name="repassword" />
                                 </div>
                             </div>

                            <br>

                             <div class="form-group">
                                 <div class="col-xs-1 col-xs-offset-6">
                                 <span type="" class="btn" name="signup" value="确定修改" onclick="confirm()">确定修改</span>
                                 </div>
                             </div>

                         </form>
                     </div>
                 </section>
                 <!-- :form -->
              </div>

            </div>
          </div>
        </div>
      </div>
    </section>
    


    <script>
      function change(a){
        $(`.set_left li[trid = ${a}]`).addClass('liactive').siblings('li').removeClass('liactive');
        $(`.set_right>div[trid = ${a}]`).show().siblings('div').hide()
      }

      function confirm(){
        if($('input[name=password]').val()!=$('input[name=repassword]').val()){
          $('input[name=password]').val('');
          $('input[name=prepassword]').val('');
          $('input[name=repassword]').val('');
          $.myToast('两次输入密码不一致,请重新输入!');
        }
        else{
          $.ajax({
            url: '/change_pass',
            type: 'POST',
            dataType: 'json',
            data: {
              prepassword: $('input[name=prepassword]').val(),
              repassword:$('input[name=repassword]').val()
            },
            success:function(res){
              if(res==1){
                location.href='/myhome';
                $.myToast('修改密码成功！')();
              }else if(res==0){
                $('input[name=password]').val('');
                $('input[name=prepassword]').val('');
                $('input[name=repassword]').val('');
                $.myToast('输入原始密码不正确！');
              }
              
              console.log(res)
            }
          })
        }
      }

    </script>
  </body>
</html>